<template>
    <el-form :inline="true" :model="formData">
        <el-form-item label="名称">
            <el-input v-model="formData.name" placeholder="请输入关键字" clearable />
        </el-form-item>
        <el-form-item label="状态">
            <Statusx v-model="formData.status" enumClassName="WarehouseStatus"></Statusx>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">新增</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="80" />
        <el-table-column prop="name" label="名称" width="100" />

        <el-table-column prop="statusX" label="状态" width="80">
            <template #default="scope">
                <el-tag class="ml-2" v-if="scope.row.status == 1" type="success">{{ scope.row.statusX }}</el-tag>
                <el-tag class="ml-2" v-if="scope.row.status == 2" type="danger">{{ scope.row.statusX }}</el-tag>
            </template>
        </el-table-column>

        <el-table-column label="图片" width="120">
            <template #default="scope">
                <img v-if="scope.row.img?.length > 0" :src="scope.row.img[0]" class="img">
            </template>
        </el-table-column>
        <el-table-column prop="brief" label="说明" width="180" />
        <el-table-column fixed="right" label="操作" min-width="160">
            <template #default="scope">
                <el-button type="primary" size="small" @click="editClick(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteClick(scope.row)">
                    弃用
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="编辑" width="50%">
        <el-form :model="formData2">
            <el-form-item label="名称">
                <el-input v-model="formData2.name" placeholder="请输入关键字" clearable />
            </el-form-item>
            <el-form-item label="图片">
                <el-space wrap>
                    <Tuku v-model="formData2.img1"></Tuku>
                    <Tuku v-model="formData2.img2"></Tuku>

                </el-space>

            </el-form-item>
            <el-form-item label="状态">
                <Statusx v-model="formData2.status" enumClassName="WarehouseStatus"></Statusx>
            </el-form-item>
            <el-form-item label="排序">
                <el-input-number v-model="formData2.seq" :min="1" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model:modelValue="formData2.brief"></el-input>
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">

import warehouseApi from '@/api/warehouseApi'
import { dayjs, ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter()

const tableData = ref<any>([])
const dialogVisible = ref(false)
const formData = reactive({ name: '', status: 1 })
const formData2 = reactive({
    id: 0, name: '', status: 1, seq: 0, brief: '', img: [], img1: "",
    img2: "",

})
onMounted(() => {

    callApi()


})

const onSubmit = () => {

    callInsertApi()

}
const save = () => {
    formData2.img = []
    formData2.img.push(formData2.img1)
    formData2.img.push(formData2.img2)
    warehouseApi.update(formData2).then((res: any) => {
        ElMessage.success('成功')
        dialogVisible.value = false
        callApi()
    })


}
const callInsertApi = () => {
    let params: any = {}

    params.name = formData.name != '' ? formData.name : undefined

    params.status = formData.status != 0 ? formData.status : undefined
    warehouseApi.insert(params).then((res: any) => {

        callApi()
    })
}

const callApi = () => {

    warehouseApi.select().then((res: any) => {

        console.log(res);


        tableData.value = res
    })


}

const editClick = (row: any) => {
    //router.push({ name: "product-edit", params: { id: row.id } })

    dialogVisible.value = true

    formData2.id = row.id
    formData2.name = row.name
    formData2.status = row.status
    formData2.seq = row.seq
    formData2.brief = row.brief
    //formData2.img = row.img
    if (row.img != null) {
        formData2.img1 = row.img[0]
        formData2.img2 = row.img[1]
    }


}
const deleteClick = (row: any) => {
    ElMessageBox.confirm(
        '你确定要弃用 ' + row.name + ' 吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {

            warehouseApi.delete({ id: row.id }).then((res: any) => {

                ElMessage.success('删除成功')
                callApi()
            })

        })
        .catch(() => {

        })
}

</script>

<style scoped>
.img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
}
</style>